<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<style>
			.main{
				width: 500px;
				height: 300px;
			}
			.content-yj{
				width: 500px;
				height: 300px;
				border: 1px solid red;
				display: flex;
				justify-content: space-around;
				position: relative;
			}
				.content-dt{
							width: 500px;
							height: 300px;
							border: 1px solid red;
							display: flex;
							justify-content: space-around;
							position: relative;
						}
			.item{
				width: 500px;
				height: 300px;
				border: 1px solid black;
			}
			.hidden{
				display: none;
			}
		
		.icon{
			position: absolute;
			top: 280px;
		
		}
		.title{
			display: flex;
		}

		.current{
			font-size: 20px;
			font-weight: bolder;
			order: -1;	
		}
		</style>
	</head>
	<body>
		<div class="title">
			<div class="dt">动态</div>
		
			<div class="yj">业绩</div>
	</div>
		
		<div class="main">
			<div class="content-dt">
			<div class="item ">动态1</div>
			<div class="item  hidden">动态2</div>
			<div class="item hidden">动态3</div>
			<div class="item hidden ">动态4</div>
			<div class="item hidden">动态5</div>
			<div class="icon icon-dt">
				<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;margin-right:10px;'></span>
				<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;margin-right:10px;'></span>
				<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;margin-right:10px;'></span>
			</div>
			</div>
			
			<div class="content-yj hidden">
			<div class="item ">业绩1</div>
			<div class="item  hidden">业绩2</div>
			<div class="item  hidden">业绩3</div>
			<div class="item hidden ">业绩4</div>
			<div class="item hidden">业绩5</div>
			<div class="icon icon-yj">
				<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;margin-right:10px;'></span>
				<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;margin-right:10px;'></span>
				<span class='layui-badge-dot layui-bg-gray' style='width: 15px;height: 15px;margin-right:10px;'></span>
			</div>
			</div>
			
		</div>
	
		<script>
			$(function(){
				$(".dt").click(function(){
					$(".content-yj").addClass("hidden")
					$(".yj").removeClass("current")
					$(".dt").addClass("current")
					$(".content-dt").removeClass("hidden")
					
				})
				$(".yj").click(function(){
					$(".content-dt").addClass("hidden")
					$(".dt").removeClass("current")
					$(".yj").addClass("current")
					$(".content-yj").removeClass("hidden")
				})
				
				//控制子内容切换
				//控制动态
				$(".icon-dt span").each(function(i,el){
					$(".icon-dt span").eq(i).hover(function(){
						console.log(1)
						$(".content-dt .item").eq(i).siblings(".item").addClass("hidden")
						$(".content-dt .item").eq(i).removeClass("hidden")
					
					},function(){})
				})
				//控制业绩
				$(".icon-yj span").each(function(i,el){
					$(".icon-yj span").eq(i).hover(function(){
						console.log(1)
						$(".content-yj .item").eq(i).siblings(".item").addClass("hidden")
						$(".content-yj .item").eq(i).removeClass("hidden")
					
					},function(){})
				})
				
			
			})
		</script>
		
	</body>
</html>
